<template>
  <div class="ele-body">
    <el-card :class="classObj" shadow="never">
      <div class="left-tree">
        <div class="collapse-box">
          <i v-if="treeOpened" class="el-icon-s-fold" @click="closeTree"></i>
          <i v-else class="el-icon-s-unfold" @click="closeTree"></i>
        </div>
        <div v-show="treeOpened" class="top">
          <span>省市区列表</span>
        </div>
        <div class="menu">
          <el-scrollbar>
            <el-menu :unique-opened="true" class="el-menu-vertical-demo" mode="vertical" @close="handleClose"
              @open="handleOpen">
              <el-submenu v-for="(item, i) in treeList" :key="i" :index="item.id.toString()">
                <template slot="title">
                  <span>{{ item.name }}</span>
                </template>
                <el-submenu v-for="(item_c1, j) in item.children" :key="j" :index="item_c1.id.toString()">
                  <template slot="title">{{ item_c1.name }}</template>
                  <el-submenu v-for="(item_c2, k) in item_c1.children" :key="k" :index="item_c2.id.toString()">
                    <template slot="title">{{ item_c2.name }}</template>
                    <el-submenu v-for="(item_c3, l) in item_c2.children" :key="l" :index="item_c3.id.toString()">
                      <template slot="title">{{ item_c3.name }}</template>
                      <el-menu-item v-for="(item_c4, m) in item_c3.children" :key="m" :index="item_c4.id.toString()"
                        @click="selectSchool(item_c4)">{{ item_c4.name }}
                      </el-menu-item>
                    </el-submenu>
                  </el-submenu>
                </el-submenu>
              </el-submenu>
            </el-menu>
          </el-scrollbar>
        </div>
      </div>
      <div class="right-content">
        <!-- 搜索表单 -->
        <el-form :model="query" class="ele-form-search" label-width="80px" @keyup.enter.native="reload"
          @submit.native.prevent>
          <el-row :gutter="15">
            <el-col :lg="4" :md="12">
              <el-form-item label="IMEI:">
                <el-input v-model="query.imei" clearable placeholder="请输入设备IMEI" />
              </el-form-item>
            </el-col>
            <!--            <el-col :lg="4" :md="12">-->
            <!--              <el-form-item label="RFID:">-->
            <!--                <el-input-->
            <!--                  clearable-->
            <!--                  v-model="query.rfid"-->
            <!--                  placeholder="请输入设备RFID"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :lg="4" :md="12">-->
            <!--              <el-form-item label="型号:">-->
            <!--                <el-select v-model="query.model_id" style="width:100%;">-->
            <!--                  <el-option-->
            <!--                    :key="i"-->
            <!--                    :value="item.id"-->
            <!--                    :label="item.name"-->
            <!--                    v-for="(item, i) in modelList"-->
            <!--                  ></el-option>-->
            <!--                </el-select>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :lg="4" :md="12">
              <el-form-item label="姓名:">
                <el-input v-model="query.name" clearable placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="12">
              <el-form-item label="学号:">
                <el-input v-model="query.student_no" clearable placeholder="请输入学号" />
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="12">
              <el-form-item label="服务IP:">
                <el-input v-model="query.ip" clearable placeholder="请输入设备服务IP" />
              </el-form-item>
            </el-col>
            <!--            <el-col :lg="4" :md="12">-->
            <!--              <el-form-item label="版本号:">-->
            <!--                <el-input-->
            <!--                  clearable-->
            <!--                  v-model="query.ver"-->
            <!--                  placeholder="请输入设备版本号"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :lg="4" :md="12">-->
            <!--              <el-form-item label="蓝牙MAC:">-->
            <!--                <el-input-->
            <!--                  clearable-->
            <!--                  v-model="query.mac"-->
            <!--                  placeholder="请输入设备蓝牙MAC"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :lg="8" :md="12">
              <div class="ele-form-actions" style="margin-left: 80px">
                <el-button class="ele-btn-icon" icon="el-icon-search" type="primary" @click="reload">查询
                </el-button>
                <el-button @click="reset">重置</el-button>
                <el-button icon="el-icon-download" @click="exportTable">导出
                </el-button>
              </div>
            </el-col>
          </el-row>
          <!--          <el-row :gutter="15">-->
          <!--            <el-col :lg="4" :md="12">-->
          <!--              <el-form-item label="服务IP:">-->
          <!--                <el-input-->
          <!--                  clearable-->
          <!--                  v-model="query.ip"-->
          <!--                  placeholder="请输入设备服务IP"-->
          <!--                />-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--&lt;!&ndash;            <el-col :lg="4" :md="12">&ndash;&gt;-->
          <!--&lt;!&ndash;              <el-form-item label="版本号:">&ndash;&gt;-->
          <!--&lt;!&ndash;                <el-input&ndash;&gt;-->
          <!--&lt;!&ndash;                  clearable&ndash;&gt;-->
          <!--&lt;!&ndash;                  v-model="query.ver"&ndash;&gt;-->
          <!--&lt;!&ndash;                  placeholder="请输入设备版本号"&ndash;&gt;-->
          <!--&lt;!&ndash;                />&ndash;&gt;-->
          <!--&lt;!&ndash;              </el-form-item>&ndash;&gt;-->
          <!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
          <!--&lt;!&ndash;            <el-col :lg="4" :md="12">&ndash;&gt;-->
          <!--&lt;!&ndash;              <el-form-item label="蓝牙MAC:">&ndash;&gt;-->
          <!--&lt;!&ndash;                <el-input&ndash;&gt;-->
          <!--&lt;!&ndash;                  clearable&ndash;&gt;-->
          <!--&lt;!&ndash;                  v-model="query.mac"&ndash;&gt;-->
          <!--&lt;!&ndash;                  placeholder="请输入设备蓝牙MAC"&ndash;&gt;-->
          <!--&lt;!&ndash;                />&ndash;&gt;-->
          <!--&lt;!&ndash;              </el-form-item>&ndash;&gt;-->
          <!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
          <!--            <el-col :lg="12" :md="12">-->
          <!--              <div class="ele-form-actions" style="margin-left:80px">-->
          <!--                <el-button-->
          <!--                  type="primary"-->
          <!--                  icon="el-icon-search"-->
          <!--                  class="ele-btn-icon"-->
          <!--                  @click="reload"-->
          <!--                  >查询-->
          <!--                </el-button>-->
          <!--                <el-button @click="reset">重置</el-button>-->
          <!--                <el-button icon="el-icon-download" @click="exportTable"-->
          <!--                  >导出</el-button-->
          <!--                >-->
          <!--              </div>-->
          <!--            </el-col>-->
          <!--            <el-col :lg="4" :md="12"> </el-col>-->
          <!--          </el-row>-->
        </el-form>
        <!-- 数据表格 -->
        <el-table ref="table" v-loading="loading" :data="data" border height="calc(100vh - 358px)" lazy
          @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" label="序号" type="index" width="55">
            <template slot-scope="scope">
              <span v-text="$setTableIndex(query.page, query.limit, scope.$index)">
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="姓名" prop="name" width="100" />
          <el-table-column :show-overflow-tooltip="true" align="center" label="IMEI" prop="imei" />
          <el-table-column :show-overflow-tooltip="true" align="center" label="学号" prop="student_no" />
          <el-table-column :show-overflow-tooltip="true" align="center" label="学校" prop="schoole_name" />
          <!--<el-table-column-->
          <!--  label="RFID"-->
          <!--  align="center"-->
          <!--  prop="rfid"-->
          <!--  :show-overflow-tooltip="true"-->
          <!--/>-->
          <el-table-column :show-overflow-tooltip="true" align="center" label="服务IP" prop="ip" width="130" />
          <!--<el-table-column-->
          <!--  width="180"-->
          <!--  label="身份证号"-->
          <!--  align="center"-->
          <!--  prop="id_card"-->
          <!--/>-->
          <!--<el-table-column-->
          <!--  label="型号"-->
          <!--  align="center"-->
          <!--  prop="model_name"-->
          <!--  :show-overflow-tooltip="true"-->
          <!--/>-->
          <!--<el-table-column-->
          <!--  prop="mac"-->
          <!--  label="蓝牙MAC"-->
          <!--  align="center"-->
          <!--  :show-overflow-tooltip="true"-->
          <!--/>-->
          <!--<el-table-column-->
          <!--  label="号码"-->
          <!--  align="center"-->
          <!--  prop="phone"-->
          <!--  width="110"-->
          <!--/>-->
          <el-table-column align="center" label="关联用户" prop="user_name" />
          <!--<el-table-column-->
          <!--  label="所属用户"-->
          <!--  align="center"-->
          <!--  prop="belong_user_name"-->
          <!--/>-->
          <!--<el-table-column-->
          <!--  label="激活时间"-->
          <!--  align="center"-->
          <!--  prop="active_time"-->
          <!--  width="160">-->
          <!--  <template slot-scope="scope">-->
          <!--    {{ $parseTime(scope.row.active_time) }}-->
          <!--  </template>-->
          <!--</el-table-column>-->
          <!--<el-table-column-->
          <!--  width="160"-->
          <!--  label="到期时间"-->
          <!--  align="center"-->
          <!--  prop="active_time">-->
          <!---->
          <!--  <template slot-scope="scope">-->
          <!--    {{ $parseTime(scope.row.expire_time) }}-->
          <!--  </template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="性别" align="center">-->
          <!--  <template slot-scope="scope">-->
          <!--    <template v-if="scope.row.gender == 1">男</template>-->
          <!--    <template v-if="scope.row.gender == 2">女</template>-->
          <!--  </template>-->
          <!--</el-table-column>-->
          <el-table-column align="center" label="最近活跃" prop="">
            <template slot-scope="scope">
              <template v-if="scope.row.is_active == 0">否</template>
              <template v-if="scope.row.is_active == 1">是</template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="禁止" prop="is_forbid">
            <template slot-scope="scope">
              <template v-if="scope.row.is_forbid == 0">否</template>
              <template v-if="scope.row.is_forbid == 1">是</template>
            </template>
          </el-table-column>
          <!--<el-table-column label="版本号" align="center" prop="ver" />-->
          <el-table-column :resizable="false" align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="primary" icon="el-icon-edit" :underline="false"
                @click="bindSchool(scope.row)">编辑</el-button>
              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                <el-button size="mini" type="text">请选择</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handleEdit">查看</el-dropdown-item>
                  <!-- <el-dropdown-item command="remove">删除</el-dropdown-item> -->
                  <el-dropdown-item command="handleProhibit">禁止
                  </el-dropdown-item>
                  <el-dropdown-item command="handleReplace">换机
                  </el-dropdown-item>
                  <el-dropdown-item command="handleStatus">终端状态
                  </el-dropdown-item>
                  <el-dropdown-item command="handleFamilyNumber">亲情号码
                  </el-dropdown-item>
                  <el-dropdown-item command="handleLocation">定位接口
                  </el-dropdown-item>
                  <el-dropdown-item command="handleUnbind">解除绑定
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <pagination :limit.sync="query.limit" :page.sync="query.page" :total="total" @pagination="getData" />
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="showEdit" append-to-body width="1000px"
      @closed="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="form.stu_name" disabled placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="号码">-->
          <!--              <el-input-->
          <!--                v-model="form.stu_phone"-->
          <!--                placeholder="请输入号码"-->
          <!--                disabled-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="学号">
              <el-input v-model="form.student_no" disabled placeholder="请输入学号" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="身份证号">-->
          <!--              <el-input-->
          <!--                v-model="form.id_card"-->
          <!--                placeholder="请输入身份证号"-->
          <!--                disabled-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="性别">-->
          <!--              <el-select v-model="form.gender" style="width:100%" disabled>-->
          <!--                <el-option :value="1" label="男" />-->
          <!--                <el-option :value="2" label="女" />-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="关联用户">-->
          <!--              <el-select filterable style="width:100%" v-model="form.user_id">-->
          <!--                <el-option-->
          <!--	               v-for="(item, i) in userList"-->
          <!--                  :key="i"-->
          <!--                  :value="item.id"-->
          <!--                  :label="item.realname"-->
          <!--                />-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="IMEI">
              <el-input v-model="form.imei" disabled placeholder="请输入设备IMEI" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="所属用户">-->
          <!--              <el-select-->
          <!--                filterable-->
          <!--                style="width:100%"-->
          <!--                v-model="form.belong_user_id"-->
          <!--              >-->
          <!--                <el-option-->
          <!--                  :key="i"-->
          <!--                  :value="item.id"-->
          <!--                  :label="item.realname"-->
          <!--                  v-for="(item, i) in userList"-->
          <!--                />-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="RFID">-->
          <!--              <el-input-->
          <!--                v-model="form.rfid"-->
          <!--                placeholder="请输入设备RFID"-->
          <!--                disabled-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="设备激活时间">-->
          <!--              <el-date-picker-->
          <!--                type="date"-->
          <!--                style="width:100%"-->
          <!--                value-format="yyyy-MM-dd"-->
          <!--                v-model="form.active_time"-->
          <!--                placeholder="选择设备激活时间"-->
          <!--              >-->
          <!--              </el-date-picker>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="设备型号">-->
          <!--              <el-select v-model="form.model_id" style="width:100%;">-->
          <!--                <el-option-->
          <!--                  :key="i"-->
          <!--                  :value="item.id"-->
          <!--                  :label="item.name"-->
          <!--                  v-for="(item, i) in modelList"-->
          <!--                ></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="设备到期时间">-->
          <!--              <el-date-picker-->
          <!--                type="date"-->
          <!--                style="width:100%"-->
          <!--                value-format="yyyy-MM-dd"-->
          <!--                v-model="form.expire_time"-->
          <!--                placeholder="选择设备到期时间"-->
          <!--              >-->
          <!--              </el-date-picker>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="蓝牙MAC">-->
          <!--              <el-input-->
          <!--                v-model="form.mac"-->
          <!--                placeholder="请输入设备蓝牙MAC"-->
          <!--                disabled-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="服务IP">
              <el-input v-model="form.ip" disabled placeholder="请输入服务IP" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="版本号">-->
          <!--              <el-input-->
          <!--                v-model="form.ver"-->
          <!--                placeholder="请输入设备版本号"-->
          <!--                disabled-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="最近活跃">
              <el-select v-model="form.is_active" disabled style="width: 100%">
                <el-option :value="1" label="是" />
                <el-option :value="0" label="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否禁止">
              <el-select v-model="form.is_forbid" disabled style="width: 100%">
                <el-option :value="1" label="是" />
                <el-option :value="0" label="否" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--	      submitForm-->
        <el-button type="primary" @click="cancel">关 闭</el-button>
        <!--        <el-button @click="cancel">取 消</el-button>-->
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="showEmpower" append-to-body title="设置授权号码" width="600px"
      @closed="cancel">
      <el-form ref="formFamilyNum" :model="formFamilyNum" :rules="rules" label-width="110px">
        <div class="tag" style="
            width: 100%;
            border-bottom: 2px solid #ddd;
            padding: 10px 0;
            height: 32px;
            line-height: 32px;
            display: flex;
            margin-bottom: 15px;
          ">
          <div style="width: 110px; text-align: center">序号</div>
          <div style="width: calc(100% - 110px); text-align: center">
            亲情号码
          </div>
        </div>
        <el-form-item label="1" prop="phone1">
          <el-input v-model="formFamilyNum.phone1" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="2" prop="phone2">
          <el-input v-model="formFamilyNum.phone2" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="3" prop="phone3">
          <el-input v-model="formFamilyNum.phone3" placeholder="请输入手机号码" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFamilyNum">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="showLocation" :show-close="false" append-to-body
      title="定位接口" width="600px" @closed="cancel">
      <el-form ref="formLocation" :model="formLocation" :rules="rules" label-width="170px">
        <el-form-item label="单基站解析本月调用">
          <el-input v-model="formLocation.single_num" disabled />
        </el-form-item>
        <el-form-item label="单基站解析本月额度">
          <el-input v-model="formLocation.single_quota" disabled />
        </el-form-item>
        <el-form-item label="单基站解析新增额度">
          <el-input v-model="formLocation.single_add_quota" />
        </el-form-item>
        <el-form-item label="单基站解析总调用次数">
          <el-input v-model="formLocation.single_total_num" disabled />
        </el-form-item>
        <div style="
            width: 100%;
            height: 2px;
            background-color: #dddddd;
            margin: 10px 0;
          "></div>
        <el-form-item label="多基站解析每天额度">
          <el-input v-model="formLocation.multi_quota" disabled />
        </el-form-item>
        <el-form-item label="多基站解析每天调用">
          <el-input v-model="formLocation.multi_num" disabled />
        </el-form-item>
        <el-form-item label="多基站解析新增额度">
          <el-input v-model="formLocation.multi_add_quota" />
        </el-form-item>
        <el-form-item label="多基站解析总调用次数">
          <el-input v-model="formLocation.multi_total_num" disabled />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitLocation">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <schoole-jy-sb-edit :data="current1" :visible.sync="showEdit1" @done="reload" />
    <!-- 编辑弹窗 -->
    <bind-school :data="schoolForm" :visible.sync="showBind" @done="reload" />
  </div>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import schooleJySbEdit from "@/views/base/schooleManage/schoole-jy-sb-edit.vue";
  import bindSchool from './bind-school';
  export default {
    name: "DeviceList",
    components: {
      schooleJySbEdit,
      bindSchool
    },
    computed: {
      ...mapGetters(["permission"]),
      classObj() {
        return {
          hideTree: !this.treeOpened,
          openTree: this.treeOpened,
        };
      },
    },
    data() {
      var validatePhone = (rule, value, callback) => {
        var p = /^1[3456789]\d{9}$/;
        if (value == "") {
          callback();
        } else {
          if (!p.test(value)) {
            callback(new Error("手机号输入有误，请重新输入！"));
          } else {
            callback();
          }
        }
      };
      return {
        current1: null,
        showEdit1: false,
        treeOpened: true,
        treeList: [],
        loading: false, // 表格加载状态
        ids: [], // 选中数组
        selection: [], // 表格选中数据
        total: 0, // 数据总数
        data: [],
        modelList: [],
        userList: [],
        // 表格搜索条件
        query: {
          page: 1,
          limit: 10,
        },
        model_query: {
          page: 1,
          limit: 99999,
        },
        user_query: {
          page: 1,
          limit: "99999",
        },
        showBind:false,//是否显示绑定学校弹窗
        schoolForm:{},//学校表单
        showEdit: false, // 是否显示编辑弹窗
        title: "",
        form: {}, //  新增编辑表单// 表单校验
        formLocation: {},
        formFamilyNum: {
          phone1: "",
          phone2: "",
          phone3: "",
        },
        showEmpower: false,
        showLocation: false,
        rules: {
          modelName: [{
            required: true,
            message: "型号名称不能为空",
            trigger: "blur"
          }, ],
          phone1: [{
            validator: validatePhone,
            trigger: "blur"
          }],
          phone2: [{
            validator: validatePhone,
            trigger: "blur"
          }],
          phone3: [{
            validator: validatePhone,
            trigger: "blur"
          }]
        },
      };
    },
    mounted() {
      this.getData();
      this.getTreeList();
      this.getModelList();
      this.getUserList();
    },
    methods: {
      /* 树结构开关 */
      closeTree() {
        this.treeOpened = !this.treeOpened;
      },
      /* 获取树结构数据 */
      getTreeList() {
        this.$http
          .get("/student/schooleMenu")
          .then((res) => {
            console.log(res);
            this.treeList = res.data.data.data;
            console.log(this.treeList);
          })
          .catch(() => {});
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      selectSchool(info) {
        console.log(info);
        this.query.schoole_id = info.id;
        this.getData();
      },
      getUserList() {
        this.$http
          .get("/user/index", {
            params: this.user_query
          })
          .then((res) => {
            console.log(res);
            this.userList = res.data.data;
            // this.userList.map((item,index)=>{
            //   item.id = parseInt(item.id);
            // })
            console.log("----this.userList", this.userList);
          })
          .catch(() => {});
      },
      /* 获取表格数据 */
      getData() {
        this.loading = true;
        this.$http
          .get("/device_bind/index", {
            params: this.query
          })
          .then((res) => {
            this.loading = false;
            this.total = res.data.count;
            this.data = res.data.data;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      getModelList() {
        this.$http
          .get("/device_model/index", {
            params: this.model_query
          })
          .then((res) => {
            this.modelList = res.data.data;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 查询数据 */
      reload() {
        this.getData();
      },
      /* 重置搜索 */
      reset() {
        this.query = {
          page: 1,
          limit: 10,
        };
        this.reload();
      },
      /* 导出数据 */
      exportTable() {
        this.$http
          .get("/device_bind/exportExcel", {
            params: {
              limit: 999999
            },
          })
          .then((res) => {
            if (res.data.success) {
              window.open(res.data.data);
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.selection = selection;
      },
      //绑定学校
      bindSchool(row) {
        this.showBind = true;
        this.schoolForm = row;
      },
      handleCommand(command, row) {
        switch (command) {
          case "handleEdit":
            this.handleEdit(row);
            break;
          case "remove":
            this.remove(row);
            break;
          case "handleProhibit":
            this.handleProhibit(row);
            break;
          case "handleReplace":
            this.handleReplace(row);
            break;
          case "handleStatus":
            this.handleStatus(row);
            break;
          case "handleFamilyNumber":
            this.handleFamilyNumber(row);
            break;
          case "handleLocation":
            this.handleLocation(row);
            break;
          case "handleUnbind":
            this.handleUnbind(row);
            break;
          default:
            break;
        }
      },
      /* 新增数据 */
      handleAdd() {
        this.showEdit = true;
        this.title = "新增型号";
        this.form = {};
      },
      /* 修改数据 */
      handleEdit(row) {
        const id = row.id;
        this.showEdit = true;
        this.title = "查看设备信息";
        this.form = {};
        this.$http
          .get("/device_bind/info?id=" + id)
          .then((res) => {
            console.log(res);
            this.form = res.data.data;

            this.userList.forEach((item) => {
              console.log("===item.id", item.id);
              if (item.id === this.form.user_id) {
                let user_name = item.realname;
                this.form.user_id = user_name;
              }
            });
            console.log("===this.form", this.form);
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 取消新增修改 */
      cancel() {
        this.showEdit = false;
        this.showEmpower = false;
        this.showLocation = false;
        this.form = {};
        this.formLocation = {};
      },
      /* 删除 */
      remove(row) {
        const h = this.$createElement;
        const params = {
          id: row.id
        };
        this.$msgbox({
          title: "温馨提示",
          message: h("div", null, [
            h(
              "p", {
                style: "color: red;font-size:16px;"
              },
              "设备IMEI：1234567890 "
            ),
            h(
              "p", {
                style: "color: red;font-size:16px;"
              },
              "确定要删除该设备终端吗？"
            ),
          ]),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.loading = true;
          this.$http
            .get("/device_bind/delete", {
              params: params
            })
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.getData();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error("请至少选择一条数据");
          return;
        }
        this.$confirm("确定要删除选中的型号吗?", "提示", {
            type: "warning",
          })
          .then(() => {
            this.loading = true;
            this.$http
              .post("", {
                id: this.ids
              })
              .then((res) => {
                this.loading = false;
                if (res.data.code === 0) {
                  this.$message.success(res.data.msg);
                  this.getData();
                } else {
                  this.$message.error(res.data.msg);
                }
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },
      /* 禁用 */
      handleProhibit(row) {
        // const params = {id: row.id, is_forbid: 1};
        // const h = this.$createElement;
        this.current1 = {
          title: "设备禁用",
          imei: row.imei,
          mode: "stealth",
        };
        this.showEdit1 = true;
      },
      // /* 禁用 */
      // handleProhibit(row) {
      // 	const params = {id: row.id, is_forbid: 1};
      // 	const h      = this.$createElement;
      // 	this.$msgbox({
      // 		title            : "温馨提示",
      // 		message          : h("div", null, [
      // 			h(
      // 				"p",
      // 				{style: "color: red;font-size:16px;"},
      // 				"设备IMEI：" + row.imei
      // 			),
      // 			h(
      // 				"p",
      // 				{style: "color: red;font-size:16px;"},
      // 				"确定要禁止该设备终端吗？"
      // 			)
      // 		]),
      // 		showCancelButton : true,
      // 		confirmButtonText: "确定",
      // 		cancelButtonText : "取消"
      // 	}).then(() => {
      // 		this.loading = true;
      // 		this.$http
      // 			.get("/device_imei/setForbid", {params: params})
      // 			.then(res => {
      // 				this.loading = false;
      // 				if (res.data.code === 0) {
      // 					this.$message.success(res.data.msg);
      // 					this.getData();
      // 				} else {
      // 					this.$message.error(res.data.msg);
      // 				}
      // 			})
      // 			.catch(e => {
      // 				this.loading = false;
      // 				this.$message.error(e.message);
      // 			});
      // 	});
      // },
      /* 换机 */
      handleReplace(row) {
        console.log(row);
        const imei = row.imei;
        this.$prompt("请输入新机IMEI号", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            // inputErrorMessage: "邮箱格式不正确"
          })
          .then(({
            value
          }) => {
            this.loading = true;
            this.$http
              .post("/device_bind/change", {
                imei: imei,
                new_imei: value
              })
              .then((res) => {
                this.loading = false;
                if (res.data.code === 0) {
                  this.$message.success(res.data.msg);
                  this.getData();
                } else {
                  this.$message.error(res.data.msg);
                }
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });
      },
      /* 设备状态 */
      handleStatus(row) {
        console.log(row);
        this.loading = true;
        const h = this.$createElement;
        this.$msgbox({
          title: "温馨提示",
          message: h("div", null, [
            h(
              "p", {
                style: "font-size:16px;text-indent:32px;"
              },
              "终端查询状态已设置，请拨打终端电话触发心跳指令或者等30分钟的主动心跳指令，日志里可以查询终端状态信息。"
            ),
          ]),
          showCancelButton: false,
          confirmButtonText: "关闭",
          cancelButtonText: "取消",
        }).then(() => {
          this.loading = false;
          this.reset();
        });
        // this.$http
        //   .post("/device_imei/setQueryStatus", { id: row.id, status: 1 })
        //   .then(res => {
        //     this.loading = false;
        //     if (res.data.code === 0) {
        //       const h = this.$createElement;
        //       this.$msgbox({
        //         title: "温馨提示",
        //         message: h("div", null, [
        //           h(
        //             "p",
        //             { style: "font-size:16px;text-indent:32px;" },
        //             "终端查询状态已设置，请拨打终端电话触发心跳指令或者等30分钟的主动心跳指令，日志里可以查询终端状态信息。"
        //           )
        //         ]),
        //         showCancelButton: false,
        //         confirmButtonText: "关闭",
        //         cancelButtonText: "取消"
        //       }).then(() => {});
        //     } else {
        //       // this.$message.error(res.data.msg);
        //     }
        //   })
        //   .catch(e => {
        //     this.loading = false;
        //     this.$message.error(e.message);
        //   });
      },
      /* 亲情号码 */
      handleFamilyNumber(row) {
        console.log(row);
        this.showEmpower = true;
        this.formFamilyNum = {
          phone1: "",
          phone2: "",
          phone3: "",
        };
        this.formFamilyNum.imei = row.imei;
        this.$http
          .get("/terminalrelative/index", {
            params: {
              imei: row.imei
            },
          })
          .then((res) => {
            console.log(res.data.data);
            if (res.status == 200 && res.data.data.length > 0) {
              if (res.data.data[0]) {
                this.formFamilyNum.phone1 = res.data.data[0];
              }
              if (res.data.data[1]) {
                this.formFamilyNum.phone2 = res.data.data[1];
              }
              if (res.data.data[2]) {
                this.formFamilyNum.phone3 = res.data.data[2];
              }
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 定位接口 */
      handleLocation(row) {
        console.log(row);
        this.showLocation = true;
        this.$http
          .get("/device_quota/info?imei=" + row.imei)
          .then((res) => {
            console.log(res);
            this.formLocation = res.data.data;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 解除绑定 */
      handleUnbind(row) {
        console.log(row);
        const h = this.$createElement;
        this.$msgbox({
          title: "温馨提示",
          message: h("div", null, [
            h(
              "p", {
                style: "color: red;font-size:16px;"
              },
              "设备IMEI：" + row.imei
            ),
            h(
              "p", {
                style: "color: red;font-size:16px;"
              },
              "确定解除次终端绑定的信息吗？"
            ),
          ]),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.loading = true;
          this.$http
            .post("/device_bind/delete", {
              id: row.id
            })
            .then((res) => {
              console.log(res);
              this.$message.success("操作成功");
              this.cancel();
              this.getData();
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },
      /* 提交表单 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            const postdata = {
              id: this.form.id,
              ip: this.form.ip,
              ver: this.form.ver,
              mac: this.form.mac,
              imei: this.form.imei,
              rfid: this.form.rfid,
              model_id: this.form.model_id,
              is_forbid: this.form.is_forbid,
              active_time: this.form.active_time,
              expire_time: this.form.expire_time,
              user_id: this.form.user_id,
              belong_user_id: this.form.belong_user_id,
            };
            // this.userList.forEach(item => {
            //   if (item.id === this.form.user_id) {
            //     postdata.user_name = item.realname;
            //   }
            //   if (item.id === this.form.belong_user_id) {
            //     postdata.belong_user_ame = item.realname;
            //   }
            // });
            this.$http
              .post("/device_bind/edit", postdata)
              .then((res) => {
                console.log(res);
                this.$message.success("操作成功");
                this.getData();
                this.cancel();
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          }
        });
      },
      /* 提交定位 */
      submitLocation() {
        this.$refs["formLocation"].validate((valid) => {
          if (valid) {
            const form = {
              imei: this.formLocation.imei,
              single_add_quota: this.formLocation.single_add_quota,
              multi_add_quota: this.formLocation.multi_add_quota,
            };
            this.$http
              .post("/device_quota/edit", form)
              .then((res) => {
                console.log(res);
                this.$message.success("操作成功");
                this.cancel();
                this.getData();
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          }
        });
      },
      submitFamilyNum() {
        this.$refs["formFamilyNum"].validate((valid) => {
          if (valid) {
            let numStr = "";
            if (this.formFamilyNum.phone1 && this.formFamilyNum.phone1 != "") {
              numStr += this.formFamilyNum.phone1;
            }
            if (this.formFamilyNum.phone2 && this.formFamilyNum.phone2 != "") {
              numStr += "," + this.formFamilyNum.phone2;
            }
            if (this.formFamilyNum.phone3 && this.formFamilyNum.phone3 != "") {
              numStr += "," + this.formFamilyNum.phone3;
            }
            let form = new FormData();
            form.append("student_id", this.formFamilyNum.student_id);
            form.append("imei", this.formFamilyNum.imei);
            form.append("phone", numStr);
            this.$http
              .post("/terminalrelative/edit", form)
              .then((res) => {
                console.log(res);
                this.$message.success("操作成功");
                this.cancel();
                this.getData();
                this.formFamilyNum = {
                  phone1: "",
                  phone2: "",
                  phone3: ""
                };
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          }
        });
      },
      subReload() {},
    },
  };
</script>

<style lang="scss" scoped>
  .el-dialog:not(.ele-dialog-form) .el-dialog__body .el-form .el-form-item:last-child {
    margin-bottom: 22px;
  }

  ::v-deep .el-card__body {
    position: relative;

    // display: flex;
    .left-tree {
      top: 0;
      left: 0;
      width: 220px;
      position: absolute;
      transition: width 0.28s;
      height: calc(100vh - 132px);

      .top {
        padding: 0 10px;
        width: 100%;
        height: 48px;
        line-height: 48px;
        font-size: 18px;
      }

      .menu {
        width: 100%;
        height: calc(100% - 60px);
        overflow: hidden;

        .el-scrollbar {
          height: 100%;

          .el-scrollbar__wrap {
            overflow-x: hidden;
          }

          .el-scrollbar__bar.is-horizontal {
            display: none;
          }
        }

        .el-menu {
          height: 100%;
          width: 100% !important;
        }
      }
    }

    .right-content {
      transition: margin-left 0.28s;
      margin-left: 220px;
    }
  }

  .hideTree {
    .left-tree {
      width: 0;
    }

    .right-content {
      margin-left: 0;
    }
  }

  .collapse-box {
    top: 0;
    right: -24px;
    z-index: 999;
    position: absolute;

    i {
      cursor: pointer;
      font-size: 24px;
    }
  }
</style>
